<template>
    <div class="form_top">
        <div class="switchPage">
            <div class="checkAll">
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">当前页</el-checkbox>
            </div>
            <div class="shareAccountConfiguration">
                <ShareAccountConfiguration :type="3" />
            </div>
        </div>
        <div class="btnList">
            <el-button v-if="type != 8" v-auth="'BAT_TAG_AD'" plain :disabled="selection.length === 0" @click="batchTag"
                >批量标签</el-button
            >
            <el-button v-auth="'BAT_DEL_AD'" plain :disabled="selection.length === 0" @click="batchDel"
                >批量删除</el-button
            >
            <template v-if="type == 1">
                <el-button plain @click="exprotWordArt">导入话术</el-button>
                <el-button type="primary" @click="newWordArt">新建话术</el-button>
            </template>
            <template v-else>
                <el-button v-if="type == 6" type="primary" @click="creatLink">创建链接</el-button>
                <el-button
                    v-if="![6, 8].includes(type)"
                    v-auth="'BAT_DOW_AD'"
                    plain
                    :disabled="selection.length === 0"
                    @click="batchDown"
                    >批量下载</el-button
                >
                <template v-if="type == 8">
                    <el-button type="primary" @click="createFriend">创作素材</el-button>
                </template>
                <el-button v-else v-auth="'UP_AD'" type="primary" @click="openUpload">{{ `${typeName()}` }}</el-button>
            </template>
        </div>
    </div>
    <!-- 标签弹框 -->
    <ZWSelectTag ref="formSelectRef" @submit="getTags" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeUnmount, toRefs } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import bus from '@/utils/bus';
import Dialog from '@/components/Dialog.vue';
import ZWSelectTag from '@/components/ZWSelectTag.vue';
import ShareAccountConfiguration from '@/components/common/ShareAccountConfiguration.vue';
const formSelectRef = ref(null);

import { useStore } from '@/store';
import router from '@/router';
const store = useStore();
const emit = defineEmits(['batchTag', 'batchDel', 'batchDown']);

const selection = computed(() => {
    return store.getters['table'].tableData;
});
const value = ref('');
const checkAll = ref(false); // 是否为全选
const isIndeterminate = ref(true);
const indexBounced = ref(0); // 弹框的索引
// 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
const props = defineProps(['type']);
const { type } = toRefs(props);
// 选中的图片内容
const changeList = ref([]);
const imageIdList = ref([]);
const typeName = () => {
    switch (type.value) {
        case 2:
            return '上传图片';
        case 3:
            return '上传音频';
        case 4:
            return '上传视频';
        case 5:
            return '上传文件';
        case 6:
        case 7:
            return '快速创建';
    }
};
// 打开选择标签
const batchTag = () => {
    formSelectRef.value.batchTag = true;
    formSelectRef.value.appDialog.visible = true;
    formSelectRef.value.appDialog.title = '批量标签';
    formSelectRef.value.selectTags = [];
};
// 获取标签
const getTags = (data: any) => {
    emit('batchTag', {
        tag_ids: data.tag_ids,
        defaultVal: data.defaultVal
    });
};
// 删除
const batchDel = () => {
    emit('batchDel');
};
// 下载
const batchDown = () => {
    emit('batchDown');
};
const openUpload = () => {
    store.dispatch('content/upload', {
        uploadVisib: true,
        title: typeName()
    });

    if (type.value == 5) {
        store.dispatch('content/tagsInfo', {
            showCreatTag: true
        });
    }
};
// 当前页和全部页的切换
const options = [
    {
        value: '当前页',
        label: '当前页'
    },
    {
        value: '全部页',
        label: '全部页'
    }
];
// 批量操作的显示弹框

//导入话术
const exprotWordArt = () => {
    store.dispatch('content/openWordArt', true);
    store.dispatch('content/isNewWord', false);
};
//新建话术
const newWordArt = () => {
    store.dispatch('content/openWordArt', true);
    store.dispatch('content/isNewWord', true);
};
//创建链接
const creatLink = () => {
    router.push({
        path: '/content/basematerial/link/createdLink'
    });
};
// 全选部分
const change = (data: any) => {
    changeList.value = data;
};
bus.on('change', change);
const autoCheckedAll = (value: boolean) => {
    checkAll.value = value;
};
bus.on('autoCheckedAll', autoCheckedAll);
const handleCheckAllChange = (value: boolean) => {
    bus.emit('checkAll', value);
};
// 朋友圈创作素材
const createFriend = () => {
    router.push('/content/friendcirclemat/createFriend');
};
// 销毁监听事件
onBeforeUnmount(() => {
    bus.off('change', change);
});
</script>

<style lang="scss" scoped>
.form_top {
    display: flex;
    justify-content: space-between;

    .switchPage {
        display: flex;
        align-items: center;

        .page {
            width: 110px;
            height: 36px;
        }

        .checkAll {
            padding: 0 12px;
            background: #f9f9f9;
            border-radius: 1px;
            border: 1px solid #eaeaea;
        }

        .shareAccountConfiguration {
            margin-left: 16px;
        }

        .course {
            width: 100px;
            height: 37px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff6b00;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #ffc69e;
            cursor: pointer;

            &_icon {
                margin-right: 8px;
                margin-top: 5px;
            }
        }
    }

    .btnList {
        display: flex;
        align-items: center;

        &_item {
            width: 80px;
            height: 36px;
            margin-left: 20px;
            line-height: 36px;
            text-align: center;
            color: #ff6b00;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ff6b00;
            cursor: pointer;
        }
    }

    .radio_list {
        &_item {
            &_text {
                margin-top: -3px;
            }

            &_icon {
                width: 14px;
                height: 14px;
                margin: -3px 0 0 6px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        :deep .el-radio__label {
            display: flex;
            align-items: center;
        }
    }

    .tags {
        &_title {
            margin: 10px 0;
        }

        &_list {
            display: flex;
            flex-wrap: wrap;

            &_item {
                color: #969696;
                padding: 4px 10px;
                background: #fff;
                border: 1px solid #eaeaea;
                margin-right: 16px;
                margin-bottom: 10px;
                cursor: pointer;
            }

            .checked {
                border: 1px solid #ff6b00;
                color: #ff6b00;
            }
        }
    }

    .radio_img {
        margin-top: -24px;
    }

    .Picture_bounced {
        :deep .el-tag {
            color: #ff6b00;
            background: #fffaf9;
            border-radius: 2px;
            margin-right: 6px;
            border: 1px solid #ffc69e;

            .el-tag__close {
                color: #ff6b00;
            }

            .el-tag__close:hover {
                background: none;
                color: #ff6b00;
            }
        }
    }
}
</style>
